<template lang="pug">
transition(:duration="500", enter-active-class="animated bounceInRight", leave-active-class="animated bounceOutRight")
  .toolsbar.pos-a(
    :style='isRightBar819 ? "display: none;" : ""',
    :class="[getRollfont ? 'has-notice' : 'no-notice']",
    ref="toolsbarWrap",
    v-if="getSceneStatus")
    //- transition(:duration="300", enter-active-class="animated bounceRight", leave-active-class="animated bounceOutRight")
    //-   .tip-box(v-if="getWorksData && showTips && isShow", @click="showTips = false", ref="tipBox", :style="getTipBoxStyle")
    //-     span 点我可以查看该作者的其他作品哦！
    .drop-group
      span.drop-btn(@click="showIcon")
        i.iconfont.icon-menu
      .drop-wrap(:class="{'active': isShow}", ref="dropWrap")
        .drop-item(
          v-for="(item, index) in getMiniMapList",
          :key="index",
          v-if="item.display",
          @click="handleClick(item, index)")
            i.iconfont(v-if='item.isActive', :class='item.active_icon')
            i.iconfont(v-if='!item.isActive', :class='item.icon')
    MiniMap(v-if="minimapFlat", ref="miniMapWrap")

    van-action-sheet(v-model="navSheet", :overlay="false", cancel-text="取消")
      template(v-for="(item, index) in actions")
        .new-text-ty.pos-r(:key="index" @click.stop="handleNavMenu(item)")
          h3.new-text-tyn.tac.omit {{item.name || item.title}}
          template(v-if='!isPerspective(item)')
            p.new-text-tyt.tac(v-if="isLanjiukj && item.subtype_id != 202") {{item.created.substr(0, 10)}}
            p.new-text.pos-a(v-if="isLanjiukj && item.subtype_id != 202 && !item.is_menu_watch") new

</template>

<script>
import menuMixin from '@/mixins/menu'
import MiniMap from '@/components/MiniMap'
import $API from '@/api/services'
import $CONFIG from '@/config'
import {
  handleToolsBar,
  handleCustomMenu,
  filterToolsBarMenu
} from '@/utils/menu'
import {
  handlePerspective
} from '@/utils/krpano'
import { mapGetters } from 'vuex'

const perspectiveMenu = $CONFIG.perspectiveMenu

export default {
  mixins: [menuMixin],
  data() {
    return {
      rightBar819: $globalconfig.RIGHTBAR819,
      isLanjiukj: $globalconfig.MODULES.IS_LANJIUKJ_PROGRAM_OPEN, // 845定制
      isShow: true,
      showTips: false,
      minimapFlat: true, // 小地图图标开关
      miniMapData: null,
      curSceneId: null,
      navSheet: false,
      navActions: [],
      toolsBarMenu: [],
      tipPos: 0
    }
  },
  computed: {
    ...mapGetters(['worksData', 'panoInfo', 'sceneList', 'menuData']),
    isRightBar819() {
      if (this.rightBar819 && this.panoInfo && this.panoInfo.templatetype < 3) {
        return true
      }
      return false
    },
    getWorksData() {
      if (this.worksData && this.worksData.length > 0) {
        return true
      }
    },
    getSceneStatus() {
      // toolsbar 所需数据返回后加载
      if (this.worksData && this.sceneList && this.menuData) {
        return true
      }
    },
    getRollfont() {
      if(this.panoInfo) {
        return this.panoInfo.rollfont
      }
    },
    getTipBoxStyle() {
      if (this.tipPos) {
        return `top: ${this.tipPos - 50 - (this.getIsInIframe ? 46 : 0)}px`
      }
    },
    getMiniMapList() {
      return this.toolsBarMenu
    }
  },
  mounted() {
    this.showMiniMapIcon()
    this.showNavMenu()
    // 有加载动画时, 关闭加载动画后执行关闭tip
    this.$vgo.on('loadFinish', () => {
      this.closeTip()
    })

    $VM.$vgo.on('navigate:close', () => {
      this.toolsBarMenu = JSON.parse(JSON.stringify(filterToolsBarMenu()))
    })
  },
  methods: {
    isPerspective (item) {
      const arr = perspectiveMenu.filter(menu => menu.type === item.type)
      if (arr && arr.length > 0) {
        return true
      }
      return false
    },
    showNavMenu() {
      this.$vgo.on('navmenu:bottom', (themeId) => {
        if (themeId === 'view') {
          // 视角底部弹出框
          this.formatActions(perspectiveMenu, this.handlePerspect)
        } else {
          // themeId == 3第四套皮肤底部导航菜单，侧边底部菜单
          if(themeId == 3) {
            console.log(themeId, 5999999999)
            if (this.getBottomMenu && this.getBottomMenu.length > 0) {
              console.log(this.getBottomMenu)
              this.formatActions(this.getBottomMenu, this.handleNavMenu)
            }
          } else {
            if (this.getNavMenu && this.getNavMenu.length > 0) {
              this.formatActions(this.getNavMenu, this.handleNavMenu)
            }
          }
        }
        this.handleSheet('navSheet')
      })
    },
    showMiniMapIcon() {
      this.$vgo.on('show:minimap-icon', (data) => {
        if (data) {
          this.miniMapData = data.miniMapObj
          this.curSceneId = data.sceneId
          this.minimapFlat = true
          this.toolsBarMenu = JSON.parse(JSON.stringify(filterToolsBarMenu()))
        } else {
          this.toolsBarMenu.map((item, idx) => {
            if(item.title == 'minimap') {
              this.toolsBarMenu.splice(idx, 1)
            }
          })
        }
      })
    },
    handleSheet(type) {
      this.navSheet = true
    },
    showIcon() {
      this.isShow = !this.isShow
      if(this.isShow) {
        setTimeout(() => {
          this.tipPos = this.$refs.dropWrap.offsetHeight
        }, 200)
      }
    },
    getNewTextShow(item) {
      if (!item.is_menu_watch) {
        return true
      }
      return false
    },
    // 自定义导航菜单
    handleNavMenu(item) {
      // console.log(item)
      const arr = perspectiveMenu.filter(menu => menu.type === item.type)
      if (arr && arr.length > 0) {
        // 处理视角
        handlePerspective(item.type)
      } else {
        handleCustomMenu(item)

        if (this.isLanjiukj && this.getNewTextShow(item)) {
          if (item.subtype_id == 202) {
          } else {
            this.$store.dispatch('setNavmenuNew', {level: item.level, id: item.menu_id || item.id})
            $API('sendMenuClick', [item.menu_id || item.id])
          }
        }
      }
      this.navSheet = false
      
    },
    handleClick(item, index) {
      if(item.title == 'works') {
        this.showTips = false
      }
      handleToolsBar(item)
    },
    closeTip(delay = 4000) {
      setTimeout(() => {
        this.showTips = false
      }, delay);
    }
  },
  components: {
    MiniMap
  },
  watch: {
    panoInfo: {
      handler(data){
        // 没有加载动画时关闭tip
        if (data && data.isloading == 2) {
          this.closeTip(7000)
        }
      },
      immediate: true
    },
    getSceneStatus: {
      handler(data){
        // toolsbar 所需数据返回后加载
        if (data) {
          this.toolsBarMenu = JSON.parse(JSON.stringify(filterToolsBarMenu()))
          this.formatActions(this.getNavMenu, this.handleNavMenu)
          this.$nextTick(()=> {
            this.tipPos = this.$refs.dropWrap.offsetHeight
            this.showTips = true
          })
        }
      },
      immediate: true
    },

  },
}
</script>

<style lang="stylus" scoped>
@import '../../assets/styles/mixin.styl'
@import '../../assets/styles/color.styl'
$width = 32px
$black = #000
.has-notice
  top: 30px
.no-notice
  top: 20px
.toolsbar
  position: absolute
  right: 5px
  z-index: 98
  .tip-box
    position: absolute
    left: -140px
    width: 100px
    padding: 10px
    background-color: rgba($black, .5)
    color: #e0f300
    border-radius: 6px
    font-size: 12px
    line-height: 24px
    trangle-right(5px, rgba($black, .5))
  .drop-group
    float: left
    width: $width
    height: $width
    line-height: $width
    border-radius: 50%
    font-size: 16px
    color: #fff
    cursor: pointer
    text-align: center
    overflow: hidden
    .drop-btn
      position: relative
      background: rgba($black, .2)
      color: #fff
      width: 100%
      height: 100%
      display: block
      border-radius: 50%
      font-size: 19px
      z-index: 12
    .drop-wrap
      position: absolute
      top: 0
      left: 0
      height: 0
      width: $width
      line-height: $width
      padding-top: $width
      background: rgba($black, .2)
      border-radius: 25px
      transition: all .2s linear
      overflow: hidden
      z-index: -1
      &.active
        z-index: 11
        height: auto
      .drop-item
        position: relative
        display: inline-block
        font-size: $width
        color: #fff
        margin: 2px 5px
        line-height: 15px
        .icon-scenes
          color: $success

.new-text-ty
  padding 10px 10px
  border-bottom 1px solid #eee
  &:last-child
    border-bottom none
  .new-text-tyn
    width 100%
    font-weight normal
    font-size 16px
  .new-text-tyt
    height 12px
    line-height 12px
    width 100%
    font-size 10px
    color #999
  .new-text
    right 10px
    top 2px
    z-index 2
    height 0
    color #f00
    font-size 11px
</style>
